﻿/*
 * Dual licensed under the MIT (MIT_LICENSE.txt)
 * and GPL Version 2 (GPL_LICENSE.txt) licenses.
 *
 * Version: 1.1.1
 * Requires jquery ui tabs 1.6+
 *
 * t.j
 */
 
$.extend($.ui.tabs.prototype, {
    paging: function () {

        var self = this, initialized = false, resizeTimer = null,
			windowHeight = $(window).height(), windowWidth = $(window).width();

        function init() {

            self.tabsPanel = $('<div />').addClass('ui-tabs-paging-full');
            self.scrollPanel = $('<div />').addClass('ui-tabs-paging-display')
                                            .append(self.tabsPanel);

            self.nextButton = $('<div ><div class="ui-icon ui-icon-circle-arrow-e" /></div>').addClass('ui-tabs-paging-next ui-state-default')
                    .hover(function () {
                        self.nextButton.toggleClass('ui-state-hover');
                    })
                    .mousedown(function (e) {
                        e.preventDefault();

                        var tabsPanelWidth = 0;
                        self.lis.each(function () {
                            tabsPanelWidth += $(this).outerWidth(true);
                        });

                        var offsetleft = self.scrollPanel.width() - tabsPanelWidth;
                        if (offsetleft > 0) offsetleft = 0;

                        self.tabsPanel.stop();
                        self.tabsPanel.animate({ left: offsetleft }, 'fast');

                    })
                    .mouseup(function (e) {
                        e.preventDefault();
                        self.tabsPanel.stop();
                    })
                    ;
            self.prevButton = $('<div ><div class="ui-icon ui-icon-circle-arrow-w" /></div>').addClass('ui-tabs-paging-prev ui-state-default')
                    .hover(function () {//ui-icon-arrowthick-1-w
                        self.prevButton.toggleClass('ui-state-hover');
                    })
                    .mousedown(function (e) {
                    	e.preventDefault();
                        self.tabsPanel.stop();
                        self.tabsPanel.animate({ left: 0 }, 'fast');
                    })
                    .mouseup(function (e) {
                        e.preventDefault();
                        self.tabsPanel.stop();
                    })
                    ;
        }

        function update() {

            destroy();

            var tabsPanelWidth = 0;
            self.lis.each(function () {
                tabsPanelWidth += $(this).outerWidth(true);
            });

            if (tabsPanelWidth > self.list.width()) {

                self.tabsPanel.append(self.lis);

                self.list.append(self.prevButton);
                self.list.append(self.scrollPanel);
                self.list.append(self.nextButton);

                self.scrollPanel.width(self.list.width() - self.prevButton.outerWidth(true) - self.nextButton.outerWidth(true) - 1);

                self.tabsPanel.width(tabsPanelWidth * 2);

                //当前 tabs 左边的位置
                var currentLeft = self.tabsPanel.position().left - self.scrollPanel.position().left;
                if (currentLeft > 0) currentLeft = 0;
                currentLeft *= -1;
                //tabs 滚动容器长度
                var scrollWidth = self.scrollPanel.width();

                if (tabsPanelWidth < currentLeft + scrollWidth) {
                    self.tabsPanel.css('left', ((tabsPanelWidth - scrollWidth) * -1) + 'px');
                }

                initialized = true;

            }

            $(window).bind('resize', handleResize);
        }

        function handleResize() {
            if (resizeTimer) clearTimeout(resizeTimer);

            if (windowHeight != $(window).height() || windowWidth != $(window).width())
                resizeTimer = setTimeout(reupdate, 100);
        }

        function reupdate() {
            windowHeight = $(window).height();
            windowWidth = $(window).width();
            update();
        }

        function destroy() {

            $(window).unbind('resize', handleResize);

            self.list.append(self.lis);

            self.scrollPanel.detach();
            self.prevButton.detach();
            self.nextButton.detach();

            initialized = false;


        }

        function updatePosition() {
            // tabs 的总长度
            var tabsPanelWidth = 0;
            //选中的 tab 左边的位置
            var selectedLeft = 0;
            //选中的 Tab
            var selectedLi = 0;
            self.lis.each(function () {
                if ($(this).hasClass('ui-tabs-selected')) {
                    selectedLeft = tabsPanelWidth;
                    selectedLi = $(this);
                }
                tabsPanelWidth += $(this).outerWidth(true);
            });

            if (tabsPanelWidth > self.list.width()) {

                //选中的 Tab 长度
                var selectedWidth = selectedLi.outerWidth(true);
                //当前 tabs 左边的位置
                var currentLeft = self.tabsPanel.position().left - self.scrollPanel.position().left;
                if (currentLeft > 0) currentLeft = 0;
                currentLeft *= -1;
                //tabs 滚动容器长度
                var scrollWidth = self.scrollPanel.width();
                //需要滚动到的位置
                var targetLeft = -1;
                if (scrollWidth > 0) {
                    if (selectedLeft < currentLeft) {
                        targetLeft = selectedLeft;
                    } else if (selectedLeft + selectedWidth > currentLeft + scrollWidth) {
                        if (selectedWidth > scrollWidth) {
                            targetLeft = selectedLeft;
                        } else {
                            targetLeft = selectedLeft - scrollWidth + selectedWidth;
                        }
                    } else if (currentLeft + scrollWidth > tabsPanelWidth) {
                        targetLeft = tabsPanelWidth - scrollWidth;
                    }
                    //滚动出选中的tab
                    if (targetLeft >= 0) {
                        self.tabsPanel.stop();
                        self.tabsPanel.animate({ left: targetLeft * -1 }, 'fast');
                    }
                }
            }
        }

        var tabsAdd = self.add;
        self.add = function (url, label, index) {
            if (initialized)
                destroy();

            tabsAdd.apply(this, [url, label, index]);

            update();
        };

        var tabsRemove = self.remove;
        self.remove = function (index) {
            if (initialized)
                destroy();

            var beforeTab = null;
            self.lis.each(function () {
                if ($(this).hasClass('ui-tabs-selected')) {
                    beforeTab = $(this);
                    return false;
                }
            });
            var beforeWidth = beforeTab.outerWidth(true);

            tabsRemove.apply(this, [index]);

            update();

            //            var afterTab = null;
            //            var tabsPanelWidth = 0;
            //            self.lis.each(function () {
            //                if ($(this).hasClass('ui-tabs-selected')) {
            //                    afterTab = $(this);
            //                }
            //                tabsPanelWidth += $(this).outerWidth(true);
            //            });

            //            if (afterTab.length > 0) {
            //                if (afterTab[0] != beforeTab[0]) {
            //                    updatePosition();
            //                } else {
            //                    if (tabsPanelWidth > self.list.width()) {
            //                        //当前 tabs 左边的位置
            //                        var currentLeft = self.tabsPanel.position().left - self.scrollPanel.position().left;
            //                        if (currentLeft > 0) currentLeft = 0;
            //                        currentLeft *= -1;
            //                        //tabs 滚动容器长度
            //                        var scrollWidth = self.scrollPanel.width();
            //                        if (currentLeft + scrollWidth > tabsPanelWidth) {
            //                            var targetLeft = tabsPanelWidth - scrollWidth;
            //                            self.tabsPanel.stop();
            //                            self.tabsPanel.animate({ left: targetLeft * -1 }, 'slow');
            //                        }
            //                    }
            //                }
            //            }
        };
        var tabsSelect = self.select;
        self.select = function (index) {
            tabsSelect.apply(this, [index]);
            updatePosition();
        };

        $.extend($.ui.tabs.prototype, {
            pagingDestroy: function () {
                destroy();
            },
            pagingUpdate: function () {
                update();
            }
        });

        init();
        update();
    }
});
